<template>
	<div id="tmpl">
		<div id="slider">
			<slider :imgs='imgs'></slider>
		</div>
		<div id="buy">
			<h4>{{list.title}}</h4>
			<hr />
			<p class="line">
				<ul>
					<li class="price">市场价<s>￥{{list.market_price}} </s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销售价<span>￥{{list.sell_price}}</span></li>
					<li id="inps">购买数量：<inputNumber class="inp" v-on:dataobj="getcount"></inputNumber><div class="ball"></div></li>
					
					<li>
						<mt-button class="jl" type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small"  @click="toshopcar">加入购物车</mt-button>
					</li>
				</ul>
			</p>
		</div>
       <div id="params">
       	<h6>商品详情</h6>
       	<hr />
       	<ul>
       		<li>商品货号：{{list.goods_no}}</li>
       		<li>库存详情：{{list.stock_quantity}}</li>
       		<li>上架时间：{{list.add_time | datefmt('YYYY-MM-DD')}}</li>
       	</ul>
       </div>
	<div id="other">
		<router-link v-bind="{to:'/goods/goodsdes/'+list.id}">
		<mt-button type="primary" size="large">图文详情</mt-button></router-link>
		<router-link v-bind="{to:'/goods/goodscomment/'+list.id}">
			<mt-button class='imgdes' type="danger" size="large">商品评论</mt-button>
		</router-link>
	</div>
	</div>
</template>

<script>
	
	import slider from "../suboom/slider.vue";
	import inputNumber from "../suboom/inputNumber.vue";
	 import commen from "../../kits/commen.js";
	  import  {setItem,goodsObj} from "../../kits/logsg.js";
	 import {vm,Count} from "../../kits/vm.js";
	export default{
		components:{
			slider,inputNumber
		},
		data(){
			return{
				id:0,
				imgs:[],
				list:'',
				inpCount:1,
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getlist();
			this.getimglist();
		},
			methods:{
				getcount(count){
					this.inpCount=count;
				},
				toshopcar(){
					vm.$emit(Count,this.inpCount);
					goodsObj.goodsid=this.id;
					goodsObj.count=this.inpCount;
					setItem(goodsObj)
				},
    		getlist(){
    			var url=commen.apidomain+"/api/getthumimages/"+this.id;
    			this.$http.get(url).then(function(response){
    				var data=response.body;
    				if(data.status!=0){
    					Toast(data.message);
    					return;
    				}
    				this.imgs=data.message;
    			})
    		},
			getimglist(){
    			var url=commen.apidomain+"/api/goods/getinfo/"+this.id;
    			this.$http.get(url).then(function(response){
    				var data=response.body;
    				if(data.status!=0){
    					Toast(data.message);
    					return;
    				}
    				this.list=data.message[0];
    			})
    		},
    	
    	}
	}
</script>

<style scoped>
	#slider{
		border: 1px solid rgba(0,0,0,0.2);
		border-radius:4px;
		margin: 0 4px;
	}
	#buy li,#params li{
		list-style: none;
		padding: 8px;
	}
	#buy h4{
		color: #0094FF;
	}
	#buy ul,#params ul{
		padding-left: 0px;
	}
	#buy,#params,#other{
		padding: 5px;
		border:1px solid rgba(0,0,0,0.2);
		margin: 5px;
		border-radius:4px;
	}
	
	#other .imgdes{
		margin-top: 8px;
	}
	.inp{
		position: absolute;
		top:4px;
		left: 100px;
	}
	#inps{
		position: relative;
	}
	.ball{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		position: absolute;
background-color: red;
left: 130px;
top: 8px;

	}

</style>